<template>
  <el-dialog
    top="30px"
    width="800px"
    append-to-body
    :close-on-click-modal="false"
    :before-close="beforeClose"
    :visible.sync="visible"
  >
    <main-cmpt
      v-bind="$attrs"
      v-on="$listeners"
      ref="main"
      :query-id="innerQueryId"
      :table-id="innerTableId"
      @success="handleSuccess"
      @dismiss="handleDismiss"
    ></main-cmpt>
  </el-dialog>
</template>

<script>
import MainCmpt from '@/credit/views/county/settle/bond/component/register/Main'

export default {
  components: {
    MainCmpt,
  },
  props: {
    queryId: String,
    tableId: String,
    visible: Boolean,
  },
  data() {
    return {
      innerQueryId: '',
      innerTableId: '',
    }
  },
  computed: {},
  watch: {
    visible(val) {
      if (val) {
        this.innerQueryId = this.queryId
        this.innerTableId = this.tableId
      }
    },
  },
  created() {},
  mounted() {},
  methods: {
    beforeClose() {
      this.innerQueryId = ''
      this.innerTableId = ''
      this.$emit('update:visible', false)
    },

    handleSuccess(res) {
      this.$emit('success', res)
      this.beforeClose()
    },

    handleDismiss(res) {
      this.$emit('dismiss', res)
      this.beforeClose()
    },
  },
}
</script>

<style lang="scss" scoped></style>
